/*
 * @Description: 云卡卡面
 * @Author: tao.xie
 * @Date: 2019-06-11 15:46:31
 * @Last Modified by: tao.xie
 * @Last Modified time: 2019-06-14 15:57:56
 */
<template>
  <div>
    <div
      v-if="cardOpenOrCardFreezon"
      class="wrapper"
      :class="cardBgColor"
      @click.stop.prevent="_cardClick"
    >
      <div class="flex-h flex-vc top-wrapper">
        <img
          :src="require('../assets/card_index_bus.png')"
          v-if="showIcon"
        />
        <span
          class="flex1"
          :class="cardNameClass"
        >{{cardName}}</span>
        <span>余额：{{amount}}</span>
      </div>
      <span class="squre flex-h flex-hc">{{cardno}}</span>
    </div>
    <div @click.stop.prevent="_cardClick"
      v-else-if="cardError"
      class="wrapper wrapper-normal"
    >
      <div class="flex-h flex-vc flex-hc top-wrapper">
        <button
          @click="_login"
          v-if="isNotLogin"
          class="login-btn"
        >登录</button>
        <span
          v-else
          class="card-err-msg"
        >{{cardErrMsg}}</span>
      </div>
    </div>
    <div
      v-else
      class="wrapper"
    >
    </div>
  </div>
</template>

<script>
import { getBusCardInfo, NOT_LOGIN, CARD_NOT_OPEN, CARD_FREEZON, CARD_IS_APPLYING, CARD_OPEN } from '../api/api.js'
export default {
  data() {
    return {
      status: -2,
      amount: 0,
      cardno: ''
    }
  },
  watch: {
    status() {
      this.$store.dispatch('fetchCardState', this.status)
    }
  },
  computed: {
    cardName() {
      if (this.status === CARD_OPEN) {
        return '公交云卡'
      } else if (this.status === CARD_FREEZON) {
        return '公交云卡已冻结'
      }
    },
    cardBgColor() {
      return this.status === CARD_FREEZON ? 'wrapper-freezon' : 'wrapper-normal'
    },
    showIcon() {
      return this.status !== CARD_FREEZON
    },
    cardNameClass() {
      return this.status === CARD_FREEZON ? 'cardname-freezon' : 'cardname-normal'
    },
    cardOpenOrCardFreezon() {
      return this.status === CARD_OPEN || this.status === CARD_FREEZON
    },
    cardError() {
      return this.status === NOT_LOGIN || this.status === CARD_IS_APPLYING || this.status === CARD_NOT_OPEN
    },
    isNotLogin() {
      return this.status === NOT_LOGIN
    },
    cardErrMsg() {
      return this.status === CARD_NOT_OPEN ? '开通云卡，乘车便捷享优惠 >' : '云卡审核中...'
    }
  },
  mounted() {
    // 添加cordova的生命周期
    document.addEventListener('resume', () => {
      this._getBusCardInfo()
    })
  },
  activated() {
    // 路由激活生命周期，重新获取云公交卡信息，首次进去的时候 也会在mounted后调用该生命周期
    this._getBusCardInfo()
  },
  methods: {
    _getBusCardInfo: async function () {
      try {
        let res = await getBusCardInfo()
        this.status = res.STATE
        this.amount = res.AMOUNT
        this.cardno = this._formatCardNo(res.CARD_NO)
        if (this.status === CARD_OPEN) {
          this.$EventBus.$emit('showSlideHint', true)
        } else {
          this.$EventBus.$emit('showSlideHint', false)
        }
      } catch (err) {
        let code = parseInt(err.message)
        this.status = code
        this.$EventBus.$emit('showSlideHint', false)
      }
    },
    _formatCardNo(cardNo) {
      cardNo = cardNo.replace(/\s/g, '').replace(/(\d{4})(?=\d)/g, '$1 ')
      return 'No.' + cardNo
    },
    _login() {
      this.$emit('login')
    },
    _cardClick() {
      if (this.status !== NOT_LOGIN) {
        this.$emit('pulldown')
      }
    }
  }
}
</script>

<style scoped>
.wrapper {
  width: 640px;
  height: 330px;
  border-radius: 8px;

}

.wrapper-freezon {
  background: rgb(204, 204, 204);
}

.wrapper-normal {
  background: -webkit-linear-gradient(
    left,
    rgb(72, 185, 255),
    rgb(19, 142, 218)
  ); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(
    left,
    rgb(72, 185, 255),
    rgb(19, 142, 218)
  ); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(
    left,
    rgb(72, 185, 255),
    rgb(19, 142, 218)
  ); /* Firefox 3.6 - 15 */
  background: linear-gradient(left, rgb(72, 185, 255), rgb(19, 142, 218));
  /* 标准的语法（必须放在最后） */
  box-shadow: 0px 17px 16px -17px rgb(115, 208, 255);
}

[data-dpr='1'] .wrapper-normal {
  box-shadow: 0px 8.5px 8px -8.5px rgb(115, 208, 255);
}

[data-dpr='3'] .wrapper-normal {
  box-shadow: 0px 22.5px 24px -22.5px rgb(115, 208, 255);
}

.top-wrapper {
  height: 90px;
}
.top-wrapper > img:first-of-type {
  width: 40px;
  height: 40px;
  margin-left: 40px;
}
.top-wrapper > span:first-of-type {
  color: #fff;
  font-size: 14px; /*no*/
  line-height: 90px;
}
.top-wrapper > span:last-of-type {
  margin-right: 40px;
  color: #fff;
  font-size: 14px; /*no*/
  line-height: 90px;
}
.squre {
  font-size: 20px; /*no*/
  letter-spacing: 10px;
  height: 240px;
  line-height: 240px;
  color: #fff;
  text-align: center;
}
.cardname-normal {
  margin-left: 20px;
}
.cardname-freezon {
  margin-left: 40px;
}

.login-btn {
  color: #28acff;
  background: #fff;
  width: 160px;
  height: 54px;
  border: none;
  border-radius: 100px;
  font-size: 14px; /*no*/
}
.card-err-msg {
  color: #fff;
  font-size: 14px; /*no*/
}
</style>
